<!DOCTYPE html>
<html>
<head>
	<title>Shopping Cart</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.0-beta.1.css" />
	<link rel="stylesheet" href="css/index.css" />

	<!--Product Category template-->
	<script type="text/template" id="prod-cat-tmpl">
		{{if attributes.category_id != ""}}
		<a href="#details">${ attributes.title }</a>
		{{/if}}
	</script>

	<!--Product Item template-->
	<script type="text/template" id="prod-item-tmpl">
		{{if attributes.product_id != ""}}
			<a href="#">
				<img src="img/${attributes.img}">
				<h3>${attributes.album}</h3>
				<p>Artist: ${attributes.artist}</p>
				<p>Price: &euro;${attributes.price}</p>
			</a>
			<a href="#purchase" data-rel="popup" data-transition="pop" data-position-to="window" title="Purchase Album?" id="buyItemBtn" data-theme="c">Buy Item</a>
		{{/if}}
	</script>

	<!--Product Item Popup template-->
	<script type="text/template" id="prod-item-popup-tmpl">
		{{if attributes.product_id != ""}}
			<h3>Add to Your Order?</h3>
			<img src="img/${attributes.img}" border="1px;">
			<p>
				<strong>${attributes.album}</strong> <br/>
				${attributes.artist}
			</p>
			<div data-role="controlgroup" data-type="horizontal" >
				<a href="index.html" data-role="button" data-mini="true" data-rel="back" data-inline="true" data-theme="b" class="buy-item-btn">Buy: &euro;${attributes.price}</a>
				<a href="index.html" data-role="button" data-mini="true" data-rel="back" data-inline="true">Cancel</a>
			</div>
		{{/if}}
	</script>

	<!--Order Item template-->
	<script type="text/template" id="order-item-tmpl">
		{{if attributes.product_id != ""}}
			<td><img src="img/${attributes.img}" class="basket-item-img"/></td>
			<th>${attributes.album}</th>
			<td>${attributes.artist}</td>
			<td class="tbl-price">&euro;${attributes.price}</td>
			<td><a href="#" data-role="button" data-icon="delete" data-iconpos="notext" id="remove-item-btn">Remove</a></td>
		{{/if}}
	</script>

	<script type="text/template" id="total-price-tmpl">
		<tr class="tbl-price-total-row">
			<td>&nbsp;</td>
			<th>&nbsp;</th>
			<td>&nbsp;</td>
			<td class="tbl-price tbl-price-total">&euro;${totalPrice}</td>
			<td>&nbsp;</td>
		</tr>
	</script>

	<!--Basket Button-->
	<script type="text/template" id="basket-btn-tmpl">
		<a href="#basket" class="ui-btn-right" id="basket-btn">Order: &euro;${price}</a>
	</script>

	<!--Reset Button-->
	<script type="text/template" id="reset-btn-tmpl">
		<button data-icon="refresh" id="reset-btn">Reset</button>
	</script>
	
	<!--Submit Button-->
	<script type="text/template" id="submit-btn-tmpl">
		<button data-icon="arrow-d" data-theme="b" id="submit-btn">Submit</button>
	</script>
	
</head>

<body>

	<!-- Home Page -->

	<div data-role="page" id="home">
		<div data-role="header" class="ui-bar-b" id="home-header">
			<h1>Categories</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" data-inset="true" data-filter="true" id="categories"></ul>
		</div>
	</div>

	<!-- Details Page -->

	<div data-role="page" id="details" >
		<div data-role="header" class="ui-bar-b" id="details-header">
			<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
			<h1>Details</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" data-split-icon="gear" data-filter="true" id="productList"></ul>

			<!-- Purchase Popup-->
			<div data-role="popup" id="purchase" data-overlay-theme="a" class="ui-content"></div>
		</div>
	</div>

	<!-- Basket Page -->

	<div data-role="page" id="basket">
		<div data-role="header" class="ui-bar-b">
			<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
			<h1>Your Order</h1>
		</div>
		<div data-role="content">
			<table data-role="table" id="movie-table" class="my-custom-breakpoint">
				<thead>
					<tr>
						<th class="th-img" data-priority="4"><abbr title="icon">&nbsp;</abbr></th>
						<th class="th-album"><abbr title="Album">Album</abbr></th>
						<th class="th-artist"><abbr title="Artist">Artist</abbr></th>
						<th class="th-price tbl-price"><abbr title="Item Price">Price</abbr></th>
						<th class="th-remove" data-priority="5"><abbr title="delete">&nbsp;</abbr></th>
					</tr>
				</thead>
				<tbody id="order-items"></tbody>
			</table>
		</div>
		<div data-role="footer" class="ui-bar ui-bar-e basket-footer">
		</div>

	</div>

	<script type="text/javascript" src="js/lib/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/lib/jquery.mobile-1.3.0-beta.1.min.js"></script>
	<script type="text/javascript" src="js/lib/jquery.tmpl.js" ></script>
	<script type="text/javascript" src="cordova-2.2.0.js"></script>
	<script type="text/javascript" src="js/lib/underscore.js"></script>
	<script type="text/javascript" src="js/lib/backbone.js"></script>
	<script type="text/javascript" src="js/shopping-cart.js"></script>
</body>

</html>
